<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header("projects"); ?>

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/detail.css" />
<script src="<?php echo get_template_directory_uri(); ?>/js/detail.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.1.3.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery_kv.js"></script>

<div class="wrap body body2">
	<div id="" class="content-area">
		<main id="main" class="site-main" role="main">
			<div class="content">
				<?php
				/* Start the Loop */
				while ( have_posts() ) : the_post();

					$images = get_content_image( $post->post_content );
					$firstimage = $images[1];
					$content = preg_replace('/<img[^>]+>/i','', $post->post_content);
					$title = $post->post_title;
					$start = 2;
					$start2 = 2;

					$sidebar_width = 25 * count($images);
					$sidebar_marginleft = 12.5 * count($images);

					$contentlen = mb_strlen($content);
					$s1 = $contentlen * 0.22;
					$content1 = mb_substr($content, 0, $s1);
					$content2 = mb_substr($content, $s1, $contentlen);
				?>

					<div class="img-wrapper loading" style="position: relative;">
					    <img src="<?php echo $firstimage; ?>" style="display: block; opacity: 1"  oncontextmenu="return false;" onselectstart="return false" ondragstart="return false" />
						<?php 
							while ($start < count($images)) {
						?>
								<img src="<?php echo $images[$start]; ?>" style="" oncontextmenu="return false;" onselectstart="return false" ondragstart="return false" />
						<?php
								$start = $start + 1;
							}
						?>
					</div>
						<ul class="slide" style="width: <?php echo $sidebar_width ?>px; margin-left: -<?php echo $sidebar_marginleft ?>px;">
							<li class="active"></li>
							<?php 
								while ($start2 < count($images)) {
							?>
									<li class=""></li>
							<?php
									$start2 = $start2 + 1;
								}
							?>
						</ul>


					<span class="more"></span>


				<?php
				endwhile; // End of the loop.
				?>
			</div>
			<div class="content2">
				<div class="detail dn" style="">
					<ul class="chn">
						<li class="desc">
							<p><?php echo $content; ?></p>
						</li>
					</ul>
				</div>
			</div>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();
